<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="商品信息" width="450">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" class="secTitle">
            <p>订单号:{{ scope.row.order_no }}</p>
            <p>下单时间：{{ scope.row.pay_at }}</p>
          </div>
          <template v-else>
            <div class="d-flex-column">
              <div v-for="(secItem, index) of scope.row.commodity" :key="index" style="width: 70%" >
                <div class="secTitle">
                  <el-avatar :size="50" :src="secItem.img_show" shape="square" />
                  <div class="text">
                    <p>{{ secItem.name }}</p>
                    <p>￥{{ secItem.price }}</p>
                  </div>
                  <div class="count">X {{ secItem.number }}</div>
                </div>
              </div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="specification" label="规格" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <template v-else>
            <div v-for="(secItem, index) of scope.row.commodity" :key="index">
              <div>{{ secItem.spec_name }}</div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="实付款" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <template v-else>
            <div v-for="(secItem, index) of scope.row.commodity" :key="index">
              <div style="line-height: 60px;">{{ secItem.price * secItem.number }}</div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="shop" label="店铺" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else class="shop-wrapper">
            <el-avatar :size="50" :src="scope.row.shop.avatar" shape="square" />
            <span>{{ scope.row.shop.nickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="assistant" label="负责业务员" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>{{ scope.row.clerk }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <span class="detail" @click="detail(scope)">订单详情</span>
            <span class="del" @click="deleteItem(scope)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail :order-detail="orderDetail" :dialog-visible="dialogVisible" @closeDialog="handleCloseDialog" />
  </div>
</template>
<script>
import OrderDetail from './orderDetail'
import { getOrderDetail, deleteOrderItem } from '@/api/order'
const ERR_OK = 200
export default {
  components: {
    OrderDetail
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderDetail: {}
    }
  },
  methods: {
    deleteItem(scope) {
      this._deleteOrderItem(scope.row.order_no)
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    detail(scope) {
      console.log(scope)
      this.dialogVisible = true
      this._getOrderDetail(scope.row.order_no)
    },
    showSecTitle(index) {
      return (index % 2 === 0)
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    _getOrderDetail(order_no) {
      getOrderDetail(order_no)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.orderDetail = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _deleteOrderItem(order_no) {
      return deleteOrderItem(order_no)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          }
          return Promise.resolve()
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .detail {
    color: #1baab0;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row:nth-child(odd) {
  td{
    height: 20px;
    padding: 0;
    background: #FAFAFA;
  }
}
.secTitle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p{
    white-space: nowrap;
  }
}
.shop-wrapper{
  display: flex;
  align-items: center;
}
.del{
  color: #f56c6c;
  margin-left: 10px;
  cursor: pointer;
}
.d-flex-column{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
</style>
